<!--单行文本-->
<template>
  <el-input
    v-model="value"
    v-bind="extend"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
    :clearable="clearable"
    :prefix-icon="($icon)?$icon[extend['prefix-icon']]:''"
    :suffix-icon="($icon)?$icon[extend['suffix-icon']]:''"
    @blur="run"
    @change="run"
    @clear="run"
    @keydown="clear"
  >
  </el-input>
</template>

<script lang="ts" >
  import { defineComponent } from 'vue'
  import { ElInput } from 'element-plus'
  // 引入组件需要的属性、控制类
  import { itemProps, itemController } from '../../map'

  export default defineComponent({
    name: 'el-form-item-text',
    inheritAttrs: false,
    components: {
      ElInput
    },
    props: {
      modelValue: [String, Number],
      ...itemProps // 基础属性
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      // console.log('props-text', props)
      // console.log('props-ctx', context)
      const {
        value,
        run,
        clear
      } = itemController(props, context.emit)

      return {
        value,
        run,
        clear
      }
    }
  })
</script>
